<script setup lang="tsx">
import type { BasicSectionProps } from './BasicSection.vue'

const props: BasicSectionProps = {
  title: '核心优势',
  description: '为您提供更加安全快速的网络',
  paddingTop: 155
}
</script>

<template>
  <basic-section id="core-advantages" v-bind="props">
    <div class="wrapper">
      <div
        v-for="(item, idx) in mainParts.coreAdvantages"
        :key="idx"
        class="core-advantages-item"
      >
        <div
          class="hover-bg"
          v-shadow="{ filter: 90, radius: 120, position: false }"
        ></div>
        <div class="title-wrapper">
          <!-- 极速分发 -->
          <i-ca-title-distribution
            class="icon"
            v-if="item.icon === 'distribution'"
          />
          <!-- 安全可靠 -->
          <i-ca-title-secure class="icon" v-if="item.icon === 'secure'" />
          <!-- 高效稳定 -->
          <i-ca-title-stabilize class="icon" v-if="item.icon === 'stabilize'" />
          <!-- 性能优越 -->
          <i-ca-title-superior class="icon" v-if="item.icon === 'superior'" />
          <!-- 简单快捷 -->
          <i-ca-title-simple class="icon" v-if="item.icon === 'simple'" />
          <!-- 多场景加速 -->
          <i-ca-title-accelerate
            class="icon"
            v-if="item.icon === 'accelerate'"
          />
          <div class="title">{{ item.title }}</div>
        </div>
        <p class="desc">{{ item.description }}</p>
        <!-- 极速分发 -->
        <i-ca-distribution
          class="hover-bg-icon"
          v-if="item.icon === 'distribution'"
        />
        <!-- 安全可靠 -->
        <i-ca-secure class="hover-bg-icon" v-if="item.icon === 'secure'" />
        <!-- 高效稳定 -->
        <i-ca-stabilize
          class="hover-bg-icon"
          v-if="item.icon === 'stabilize'"
        />
        <!-- 性能优越 -->
        <i-ca-superior class="hover-bg-icon" v-if="item.icon === 'superior'" />
        <!-- 简单快捷 -->
        <i-ca-simple class="hover-bg-icon" v-if="item.icon === 'simple'" />
        <!-- 多场景加速 -->
        <i-ca-accelerate
          class="hover-bg-icon"
          v-if="item.icon === 'accelerate'"
        />
      </div>
    </div>
  </basic-section>
</template>

<style lang="less" scoped>
#core-advantages {
  @apply bg-cover bg-center bg-no-repeat;
  background-image: url('@/assets/images/main-parts/bg/core-advantages.webp');
  .wrapper {
    @apply relative h-384px w-full;
    .core-advantages-item {
      @apply p-12 rounded-14px absolute h-184px box-border;
      transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
      width: calc((100% - 32px) / 3);
      border: 1px solid #fff;
      .hover-bg-icon,
      .title-wrapper,
      .desc {
        pointer-events: none;
      }

      .hover-bg,
      &::before {
        content: '';
        @apply absolute top-1/2 left-0 w-full h-full rounded-14px;
        transition: all 200ms cubic-bezier(0.645, 0.045, 0.355, 1);
        transform: translateY(-50%);
      }
      &::before {
        background: #ebf3ff;
      }
      .hover-bg {
        opacity: 0;
        overflow: hidden;
        background-image: linear-gradient(90deg, #1462fc 0%, #07a0ff 100%);
        z-index: 0;
      }
      .title-wrapper,
      .desc {
        @apply relative z-1;
        transition:
          all 300ms cubic-bezier(0.645, 0.045, 0.355, 1),
          color 0s;
      }

      .title-wrapper {
        @apply flex relative h-30px gap-2;
        .icon {
          @apply w-7 h-7;
          transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
        }
        .title {
          @apply absolute left-9 top-1/2 transform -translate-y-1/2 m-0 text-xl;
          font-family: 'PingFang SC medium';
          transition:
            all 300ms cubic-bezier(0.645, 0.145, 0.355, 1),
            color 0s;
        }
      }
      .hover-bg-icon {
        @apply w-0 h-0 absolute top-1/2 right-0 -translate-y-1/2 opacity-0 z-2;
        transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
      }

      &:hover {
        @apply pt-6;
        --title-icon-color-1: #ffffff;
        --title-icon-color-2: #ffffff;
        &::before {
          opacity: 0;
        }
        .hover-bg {
          @apply h-264px opacity-100 z-1;
        }

        .title-wrapper,
        .desc {
          @apply text-white;
        }
        .title-wrapper {
          @apply h-78px;
          .icon {
            @apply w-10 h-10;
          }
          .title {
            @apply top-12 left-0 transform-0 mt-4;
          }
        }
        .hover-bg-icon {
          @apply w-50 h-50 opacity-20;
        }
      }
    }
    .core-advantages-item:nth-child(1),
    .core-advantages-item:nth-child(2),
    .core-advantages-item:nth-child(3) {
      top: 0;
      z-index: 1;
    }

    .core-advantages-item:nth-child(1),
    .core-advantages-item:nth-child(4) {
      left: 0;
    }

    .core-advantages-item:nth-child(2),
    .core-advantages-item:nth-child(5) {
      left: calc((100% - 32px) / 3 + 16px);
    }

    .core-advantages-item:nth-child(3),
    .core-advantages-item:nth-child(6) {
      right: 0;
    }

    .core-advantages-item:nth-child(4),
    .core-advantages-item:nth-child(5),
    .core-advantages-item:nth-child(6) {
      top: calc(184px + 16px);
    }
  }
}
</style>
